<template>
  <!-- #ifndef MP-TOUTIAO -->
  <custom-nav-bar title="发布"></custom-nav-bar>
  <!-- #endif -->
  <view class="publish-container">
    <!-- 标签栏 -->
    <view class="tab-bar">
      <view
        v-for="(tab, index) in tabs"
        :key="index"
        :class="['tab-item', { active: activeTab === tab.value }]"
        @click="changeTab(tab.value)"
      >
        {{ tab.label }}
      </view>
    </view>

    <!-- 内容区 -->
    <view class="content">
      <WallpaperForm v-if="activeTab === 'wallpaper'" :id="id" />
      <AlbumForm v-if="activeTab === 'album'" :id="id" />
    </view>
  </view>
</template>
<script setup>
import { ref } from 'vue'
import WallpaperForm from './components/WallpaperForm.vue'
import AlbumForm from './components/AlbumForm.vue'
import { onLoad } from '@dcloudio/uni-app'
import CustomNavBar from '@/components/custom-nav-bar/custom-nav-bar.vue'

// 定义活动标签
const activeTab = ref('wallpaper')
const id = ref()

// 定义标签数组，每个标签包含显示文本和对应的值
const tabs = [
  { label: '发布壁纸', value: 'wallpaper' },
  { label: '发布专辑', value: 'album' },
]

const loadTab = (type) => {
  if (type === 1) {
    activeTab.value = 'wallpaper'
  } else if (type === 0) {
    activeTab.value = 'album'
  }
}

// 切换标签的方法
const changeTab = (value) => {
  //   如果传递了参数，则清除参数
  if (!isNaN(id.value)) {
    console.log('清除参数')
    uni.reLaunch({
      url: '/pages/publish/publish',
    })
  }
  activeTab.value = value
}
onLoad(async (e) => {
  const type = Number(e.type) // 将 type 转换为数字
  const eId = Number(e.id) // 将 eId 转换为数字
  loadTab(type)
  id.value = eId
})
</script>
<style lang="scss" scoped>
.publish-container {
  padding: 20rpx;
  background-color: #f5f5f5;

  .tab-bar {
    display: flex;
    justify-content: space-around;
    margin-bottom: 20rpx;
    background-color: #fff;
    border-radius: 8rpx;
    overflow: hidden;
    box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.1);

    .tab-item {
      flex: 1;
      text-align: center;
      padding: 20rpx 0;
      font-size: 30rpx;
      color: #666;
      cursor: pointer;
      transition: all 0.3s ease;

      &.active {
        color: #007aff;
        font-weight: bold;
        position: relative;

        // 添加下划线效果
        &::after {
          content: '';
          position: absolute;
          bottom: 0;
          left: 50%;
          width: 60rpx;
          height: 4rpx;
          background-color: #007aff;
          transform: translateX(-50%);
        }
      }

      &:hover {
        opacity: 0.8;
      }
    }
  }

  .content {
    background-color: #fff;
    border-radius: 8rpx;
    padding: 20rpx;
    box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.1);
  }
}
</style>
